<template>
  <p :id="id"></p>
</template>
<script>
import G2 from "@antv/g2";
export default {
  data() {
    return {
      chart: null
    };
  },

  props: {
    // charData: {
    //   type: Array,
    //   default: function() {
    //     return {
    //       data: []
    //     };
    //   }
    // },
    id: String,
    value: {},
    title: String,
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart: function() {
      console.log(this.value)
      var data1 = [];
      for (var i = 0; i < 101; i++) {
        var item = {};
        item.type = i + '';
        item.value = 10;
        data1.push(item);
      }

      var data2 = [];
      for (var _i = 0; _i < 101; _i++) {
        var _item = {};
        _item.type = _i + '';
        _item.value = 10;
        if (_i === this.value) {
          _item.value = 14;
        }
        if (_i > this.value) {
          _item.value = 0;
        }
        data2.push(_item);
      }
      //var chart = this.chart;
      this.chart && this.chart.destory();
      this.chart = new G2.Chart({
        container: this.id,
        width:220,
        height:250,
        forceFit: true,
        padding: 0
      });

      this.chart.scale({
        type: {
          range: [0, 1]
        },
        value: {
          sync: true
        }
      });
      this.chart.legend(false);
      this.chart.tooltip(false);
      var view1 = this.chart.view();
      view1.source(data1);
      view1.axis(false);
      view1.coord('polar', {
        startAngle: -9 / 8 * Math.PI,
        endAngle: 1 / 8 * Math.PI,
        innerRadius: 0.75,
        radius: 0.8
      });
      view1.interval().position('type*value').color('#fff').size(6);

      // var view2 = this.chart.view();
      // view2.source(data1, {
      //   type: {
      //     tickCount: 3
      //   }
      // });
      // view2.axis('value', false);
      // view2.axis('type', {
      //   grid: null,
      //   line: null,
      //   tickLine: null,
      //   label: {
      //     offset: -15,
      //     textStyle: {
      //       textAlign: 'center',
      //       fill: '#CBCBCB',
      //       fontSize: 18
      //     },
      //     formatter: function formatter(val) {
      //       if (val === '49') {
      //         return 50;
      //       }

      //       return val;
      //     }
      //   }
      // });
      // view2.coord('polar', {
      //   startAngle: -9 / 8 * Math.PI,
      //   endAngle: 1 / 8 * Math.PI,
      //   innerRadius: 0.95,
      //   radius: 0.55
      // });
      // view2.interval().position('type*value').color('#fff').size(6);

      var view3 = this.chart.view();
      view3.source(data2);
      view3.axis(false);
      view3.coord('polar', {
        startAngle: -9 / 8 * Math.PI,
        endAngle: 1 / 8 * Math.PI,
        innerRadius: 0.75,
        radius: 0.8
      });
      view3.interval().position('type*value').color('value', '#3023AE-#53A0FD').opacity(1).size(6);
      view3.guide().html({
        position: ['50%', '80%'],
        html: '<div style="width:250px;text-align: center;">'+
        '<p style="font-size:13px; color: #a8adb3;margin: 0;">负载率</p>'+
        '<p style="font-size:30px;color: #fff;margin: 0;">' + this.value + '%</p>'+
        '<p style="font-size:14px;color: #fff;margin: 0;">' + this.title + '</p>'+
        '</div>'
      });

      this.chart.render();
    }
  }
};
</script>